<template>
  <div class="app-container calendar-list-container" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-form :inline="true" ref="form1" :model="listQuery">
        <el-form-item label="产品品号" prop="produceNo">
          <el-input style="width: 120px;" @change="getData" v-model="listQuery.produceNo" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="listQuery.status"
            @change="getData"
            placeholder="请选择"
            style="width: 100%;"
          >
            <el-option label="正式" value="1"></el-option>
            <el-option label="草稿" value="3"></el-option>
            <el-option label="审核中" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户编码" prop="clientNumber">
          <el-input disabled clearable style="width: 120px;" v-model="listQuery.clientNumber" />
        </el-form-item>
        <el-form-item label="型号描述" prop="produceName">
          <el-input disabled clearable style="width: 200px;" v-model="listQuery.produceName" />
        </el-form-item>
        <el-form-item label="工作中心" prop="workCenter">
          <el-input disabled clearable style="width: 120px;" v-model="listQuery.workCenter" />
        </el-form-item>
        <el-form-item label="文件编号" prop="fileNo">
          <el-input disabled clearable style="width: 120px;" v-model="listQuery.fileNo" />
        </el-form-item>
        <el-form-item label="拟制人" prop="createName">
          <el-input disabled clearable style="width: 120px;" v-model="listQuery.createName" />
        </el-form-item>
        <el-form-item label="公司名称">
          <el-select v-model="listQuery.companyName" placeholder="请选择" style="width: 100%;">
            <el-option label="广州市赫能士智能科技有限公司" value="广州市赫能士智能科技有限公司"></el-option>
            <el-option label="深圳市高德威技术有限公司" value="深圳市高德威技术有限公司"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核人" prop="reviewer">
          <el-select
            v-model="listQuery.reviewer"
            filterable
            clearable
            placeholder="请选择审核人工号"
            @focus="focusUserName"
            @change="handleReviewerChange"
            style="width:150px"
          >
            <el-option
              :value="item.jobNumber"
              :label="item.userName + '（' + item.jobNumber + '）'"
              v-for="(item,index) in userNameList"
              :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="批准人" prop="approver">
          <el-select
            v-model="listQuery.approver"
            filterable
            clearable
            placeholder="请选择批准人工号"
            @focus="focusUserName"
            @change="handleApproverChange"
            style="width:150px"
          >
            <el-option
              :value="item.jobNumber"
              :label="item.userName + '（' + item.jobNumber + '）'"
              v-for="(item,index) in userNameList"
              :key="index"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- table 表格 -->
    <el-table
      :data="tableInfo"
      v-loading="loadingList"
      element-loading-text="给我一首歌的时间"
      max-height="700"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="更改时间" prop="createTime" align="center" width="200px" />
      <el-table-column label="更改原因" prop="changeSouce" align="center" width="650px" />
      <el-table-column label="更改人员" prop="createName" align="center" width="160px" />
      <el-table-column label="更改工序" prop="changeProcess" align="center"  width="600px"/>
      <el-table-column label="版本" prop="version" align="center" width="100px" />
      <el-table-column label="更改类型" prop="type" align="center" width="100px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type==1" size="medium" >立即执行</el-tag>
          <el-tag v-else-if="scope.row.type==2" size="medium"  >自然切换</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <el-divider></el-divider>
  </div>
</template>

<script>
import { getMaterial, saveSop,getProduceNoSopList } from "@/api/processRoute";
import mixin from "@/utils/mixin.js";
export default {
  name: "SOPhome",
  mixins: [mixin],
  props: {
    sop: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      listQuery: {
        status: "1",
        createBy: "",
        reviewer: ""
      },
      searchInputStyle: "width: 180px;margin-right:15px;",
      total: 0, //数据的总数
      tableInfo: [],
      loadingList: false,
      userInfo: this.$store.state.user.userInfo
    };
  },
  computed: {
    inputWid() {
      return function(value) {
        if (!value || value.length <= 10) {
          return "150px";
        } else {
          return 150 + (String(value).length - 10) * 6 + "px";
        }
      };
    }
  },
  methods: {
    receiveListQuery(data) {
      console.log('%c [ data ]-149', 'font-size:13px; background:pink; color:#bf2c9f;', data)
      this.listQuery = data;
    },
    async saveHome() {
      let query = JSON.parse(JSON.stringify(this.tableInfo));
      let data = await saveSop(this.listQuery);
      if (data.code == "1") {
        this.listQuery = data.data;
        this.sendData();
        this.$message({
          type: "success",
          message: "保存成功"
        });
      } else {
        this.$message.error(data.msg);
      }
    },
    async getData() {
      this.handleFilter();
      // 获取产品日志
      let query = {
        produceNo:this.listQuery.produceNo
      }
      let data = await getProduceNoSopList(query)
       if (data.code == "1") {
        this.tableInfo = data.data;
      }
    },
    sendData() {
      this.$emit("sop", this.listQuery);
    },
    async handleFilter() {
      if (this.listQuery.produceNo && this.listQuery.status) {
        this.loadingList = true;
        let data = await getMaterial({
          produceNo: this.listQuery.produceNo,
          status: this.listQuery.status
        });
        this.loadingList = false;
        if (data.code == "1") {
          if (data.data) {
            if (data.data.id) {
              this.listQuery = data.data;
            } else {
              // 清空查询条件
              let produceNo = this.listQuery.produceNo;
              this.listQuery = {};
              this.listQuery.produceNo = produceNo;
              this.listQuery.clientNumber = data.data.clientNumber;
              this.listQuery.produceName = data.data.materialName;
              this.listQuery.workCenter = data.data.workCenter;
              this.listQuery.status = data.data.status;
              this.listQuery.createBy = this.userInfo.jobNumber;
              this.listQuery.createName = this.userInfo.userName;
            }
          } else {
            this.listQuery = {
              produceNo: this.listQuery.produceNo,
              status: this.listQuery.status
            };
          }
          this.sendData();
        } else {
          this.$message.error(data.msg);
        }
      }
    },
    handleReviewerChange(jobNumber) {
      const selected = this.userNameList.find(
        item => item.jobNumber === jobNumber
      );
      if (selected) {
        this.listQuery.reviewerName = selected.userName;
      } else {
        this.listQuery.reviewerName = "";
      }
    },
    handleApproverChange(jobNumber) {
      const selected = this.userNameList.find(
        item => item.jobNumber === jobNumber
      );
      if (selected) {
        this.listQuery.approverName = selected.userName;
      } else {
        this.listQuery.approverName = "";
      }
    },
    // table表单下方的页码组件改变每页显示的数据条数
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.handleFilter();
    },
    // table表单下方的页码组件改变页面
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.handleFilter();
    }
  },
  // 进入页面获取table信息
  mounted() {},
  created() {
    if (this.sop) {
      this.listQuery = { ...this.listQuery, ...this.sop };
    }
  }
};
</script>

<style>
</style>